<route>
{
  "meta":{
    "title":"登录日志",
    "showMenu":true,
    "serialNum": 10,
    "localism": "sys.login_log"
  }
}
</route>
<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input
          v-model="queryData.account"
          :placeholder="$t('sys.input_operator_account')"
          clearable
          :maxlength="64"
          prefix-icon="el-icon-search"
        />
      </el-col>
      <el-col :span="6">
        <el-date-picker
          style="width: 100%"
          v-model="queryData.beginTime"
          type="datetime"
          :placeholder="$t('sys.choose_start_time')"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="6">
        <el-date-picker
          style="width: 100%"
          v-model="queryData.endTime"
          type="datetime"
          :placeholder="$t('sys.choose_end_time')"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="loadData">{{$t('sys.query')}}</el-button>
        <el-button @click="handleReset">{{$t('sys.reset')}}</el-button>
      </el-col>
    </el-row>
    <el-table
      class="mt10"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column type="index" width="50" :label="$t('sys.serial_number')" />
      <el-table-column prop="username" :label="$t('sys.operator')" />
      <el-table-column prop="createBy" :label="$t('sys.account')" />
      <el-table-column prop="loginType" :label="$t('sys.login_type')" >
        <template slot-scope="scope">
          {{ scope.row.loginType | loginType }}
        </template>
      </el-table-column>
      <el-table-column prop="createDate" :label="$t('sys.time')">
        <template slot-scope="scope">
          {{ scope.row.createDate | moment }}
        </template>
      </el-table-column>
      <el-table-column prop="clientType" :label="$t('sys.client_type')" />
      <el-table-column prop="clientIp" label="IP" />
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>
  </div>
</template>

<script>
import { getHmapploginlogPageList } from '@/apis/paas/HmAppLoginLogController.js'
export default {
  name: "AppLoginLog",
  data() {
    return {
      loading: false,
      queryData: {},
      pageData: {
        pageSize: 10,
        pageNo: 1,
      },
      tableData: [],
      total: 0,
      beginTime: "",
      endTime: "",
    };
  },

  created() {
    this.loadData();
  },

  methods: {
    loadData() {
      this.loading = true;
      const beginTimeValue =
        undefined !== this.queryData.beginTime
          ? this.queryData.beginTime.getTime()
          : undefined;
      const endTimeValue =
        undefined !== this.queryData.endTime
          ? this.queryData.endTime.getTime()
          : undefined;
      const params = {
        ...this.queryData,
        ...this.pageData,
        beginTime: beginTimeValue,
        endTime: endTimeValue,
      };
      getHmapploginlogPageList(params)
        .then((res) => {
          this.tableData = res.data;
          this.total = res.totalCount;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleReset() {
      this.queryData = {};
      this.loadData();
    },
  },
};
</script>
<style lang="scss" scoped></style>
